<template>
    <div>
      <el-container>
        <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e4e7ed;">
          <span>
            <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
            &nbsp&nbsp
            <span class="title">部门管理</span>
          </span>
          <div>
            <el-input placeholder="请输入关键字搜索" v-model="searchKey" style="width: 250px; margin-right: 10px;"></el-input>
            <el-button type="primary" icon="el-icon-search">高级搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addTask" >查询</el-button>
            <el-button type="info" >重置</el-button>
          </div>
        </el-header>
        <el-main>
          <el-table :data="taskList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column fixed prop="id" label="序号" width="55"></el-table-column>
            <el-table-column prop="deptNum" label="部门编码" width="100"></el-table-column>
            <el-table-column prop="deptName" label="部门名称" width="130"></el-table-column>
            <!-- <el-table-column prop="taskType" label="部门组织" width="130"></el-table-column> -->
            <el-table-column prop="leader" label="部门负责人" width="150"></el-table-column>
            <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
            <el-table-column prop="remark" label="部门说明" width="250"></el-table-column>
            <el-table-column prop="deptCondition" label="部门状态" width="80" :formatter="formatStatus"></el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
              <template slot-scope="scope">
                <el-button @click="viewTask(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="editTask(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="submitTask(scope.row)" type="text" size="small">提交</el-button>
                <el-button @click="handleTask(scope.row)" type="text" size="small">处理</el-button>
                <el-button @click="returnTask(scope.row)" type="text" size="small">退回</el-button>
                <el-button @click="deleteTask(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchKey: '',
        taskList: [
          {
            id: 1,
            deptNum: 'ZGSBZD',
            deptName: '迫事部',
            leader: '更知鸟有限公司',
            phone: '1582938293',
            remark: '特别紧迫事务联席快速反应与处理部',
            planEndTime: '新年好',
            deptCondition: '启动'
          },
          // 此处可继续添加更多模拟数据
        ]
      };
    },
    methods: {
      handleSelectionChange() {},
      formatStatus(row, column) {
        if (row.deptCondition === '禁用') {
          return <span style="color: orange;">{row.deptCondition}</span>;
        } else if (row.deptCondition === '启动') {
          return <span style="color: green;">{row.deptCondition}</span>;
        }
        return row.deptCondition;
      },
      viewTask(row) {
        console.log('查看任务详情', row);
        this.$router.push('/hostDisplayDetail')
      },
      editTask(row) {
        console.log('编辑任务', row);
      },
      submitTask(row) {
        console.log('提交任务', row);
      },
      handleTask(row) {
        console.log('处理任务', row);
      },
      returnTask(row) {
        console.log('退回任务', row);
      },
      deleteTask(row) {
        console.log('删除任务', row);
      },
      addTask(row) {
        console.log('新增任务', row);
        this.$router.push('/hostDisplayAdd')
      }
    }
  };
  </script>
  
  <style scoped>
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  /* 设置表格内文字自动换行 */
  .el-table {
    white-space: nowrap; /* 取消自动换行 */
    font-size: 14px; /* 把表格内字体改小，可根据实际情况调整 */
  }
  div {
    background-color: rgb(255, 255, 255);
  }
  </style>